<!--  -->
<template>
    <div class=''>
        <el-dialog :close-on-click-modal="false" v-model="modelShow" title="选择优惠券" width="70%">
            <p style="margin:10px"> 优惠券类型:
                <el-select v-model="selectType" @change="onCouponChange">
                    <el-option v-for="item in couponOptions" :label="item.name" :value="item.value" :key="item.name"></el-option>
                </el-select>
            </p>
            <el-table v-loading="loading" :data="gridData" ref="tableRef" @selection-change="handleSelectionChange">
                <el-table-column type="selection" />
                <el-table-column property="name" label="优惠券名称" />
                <el-table-column property="couponTypeText" label="优惠券类型" />
                <el-table-column property="color" label="优惠券颜色">
                    <template #default="scope">
                        <el-tag>{{ colorDic[scope.row.color] }}</el-tag>
                    </template>
                </el-table-column>
                <el-table-column property="reducePrice" label="减免金额" />
                <el-table-column property="minPrice" label="最低消费金额" />
                <el-table-column property="discount" label="折扣率%" />
                <el-table-column property="bigPrice" label="最多优惠多少元" />
                <el-table-column property="cancelType" label="核销券类型">
                      <template #default="scope">
                        <el-tag v-if="scope.row.cancelType !== null && scope.row.couponType === 30">{{hxOptions[scope.row.cancelType] }}</el-tag>
                        <div v-else></div>
                    </template>
                </el-table-column>
                <el-table-column property="isCanShare" label="可分享">
                    <template #default="scope">
                        <el-tag>{{ scope.row.isCanShare === 0 ? '不可分享' : '可分享' }}</el-tag>
                    </template>
                </el-table-column>
                <el-table-column property="superimpose" label="可叠加">
                    <template #default="scope">
                        <el-tag>{{ scope.row.isCanShare === 0 ? '不可叠加' : '可叠加' }}</el-tag>
                    </template>
                </el-table-column>
                <el-table-column property="expireDay" label="有效天数" />
                <el-table-column property="totalNum" label="发放总量" />
            </el-table>
            <div style="margin:10px auto 0px auto;float:right">
                <el-pagination background layout="prev, pager, next" :pageSize="search.pageSize" @current-change="onPageCurrentChange" :total="totalNumber" />
            </div>
            <template #footer>
                <div class="dialog-footer">
                    <el-button @click="onCancle">关闭</el-button>
                    <el-button type="primary" @click="onSave">确定</el-button>
                </div>
            </template>
        </el-dialog>
    </div>
</template>

<script>
import { ElMessage } from 'element-plus'
import CouponApi from "@/api/coupon.js";
export default {
    name: 'CouponSelect',
    props: {
        show: {
            type: Boolean,
            default: false
        }
    },
    components: {},
    data() {
        return {
            gridData: [],
            modelShow: false,
            loading: false,
            search: {
                couponType: 10,
                pageSize: 5,
                pageIndex: 1
            },
            colorDic: {
                10: '蓝色',
                20: '红色',
                30: '紫色',
                40: '黄色'
            },
            couponOptions: [
                { name: '满减券', value: 10 },
                { name: '折扣券', value: 20 },
                { name: '核销券', value: 30 },
                { name: '商品券', value: 40 },
                { name: '购买券', value: 50 },
                { name: '充值券', value: 60 },
            ],
            selectRows: [],
            selectType: '',
            hxOptions:{
                0:'肥料券',
                1:'参观券',
                2:'指导券'
            }
        };
    },
    computed: {},
    watch: {
        show: {
            immediate: true,
            handler(n, v) {
                this.modelShow = n
                if (n) {
                    this.loadCoupon()
                }
            }
        }
    },
    methods: {
        onCouponChange(e) {
            this.search.couponType =e 
            this.loadCoupon()
        },
        onSave() {
            const rows =this.selectRows 
            
            if (this.selectRows.length <= 0) {
                ElMessage.error('请选择您要的优惠券')
                return
            } else {
                this.$emit('onSave', {
                    rows: this.selectRows
                })
                this.$refs['tableRef']?.clearSelection()
            }
        },
        onCancle() {
            this.selectRows = []
            this.$emit('onCancle')
        },
        handleSelectionChange(rows) {
            this.selectRows = rows
         
        },
        onPageCurrentChange(index) {
            this.search.pageIndex = index 
            this.loadCoupon()
        },
        loadCoupon() {
            const $this = this
            $this.loading = true
            CouponApi.couponList($this.search, true)
                .then((res) => {
                    $this.loading = false
                    const { code, data } = res
                    if (code === 1) {
                        const { records,total  } = data
                        $this.gridData = records
                        $this.totalNumber =total
                    }
                })
                .catch((error) => { });

        }
    },
    created() {

    },
    mounted() {

    },
}
</script>
<style scoped></style>